<!DOCTYPE html>


<!--
#######################################
	- THE HEAD PART -
######################################
-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>SLIDER REVOLUTION - The Responsive Slider Plugin</title>

    <!-- get jQuery from the google apis -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>

    <!-- CSS STYLE-->
    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>

    <!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM -->
    <link rel="stylesheet" type="text/css" href="css/navstylechange.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="css/noneed.css" media="screen"/>


    <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
    <script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>

    <!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
    <link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen"/>

    <!-- GOOGLE FONTS -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'>

</head>


<!--
#######################################
	- THE BODY PART -
######################################
-->
<body>

<article class="prevnext">
    <a class="" href="01.Sample-Boxed.html">01</a>
    <a class="" href="02.Sample-Fullwidth.html">02</a>
    <a class="" href="03.Sample-FullScreen.html">03</a>
    <a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
    <a class="" href="05.Sample-Aligns.html">05</a>
    <a class="" href="06.Sample-AlignForce.html">06</a>
    <a class="" href="07.Sample-Videos.html">07</a>
    <a class="" href="08.Sample-NavigationStyle.html">08</a>
    <a class="" href="09.Sample-Api.html">09</a>
    <a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
    <a class="" href="11.Sample-Shuffle.html">11</a>
    <a class="" href="12.Sample-Backgrounds.html">12</a>
    <a class="" href="13.Sample-HideCaptions.html">13</a>
    <a class="active" href="14.Sample-KenBurns.html">14</a>
    <a class="" href="15.Sample-VideoBG.html">15</a>
    <a class="" href="16.Caption-ShowDown.html">16</a>
    <a class="" href="17.Sample-DottedBG.html">17</a>
    <a class="" href="18.Sample-NewCaptionEffects.html">18</a>
</article>


<!-- HEADER -->
<header>
    <section class="container">
        <article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq">
            <div class="logo"></div>
        </a></article>
        <div class="button-holder"><a
                href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank"
                class="button"><strong>BUY NOW</strong></a></div>
        <div style="clear:both"></div>
    </section>
</header> <!-- END OF HEADER -->


<article class="boxedcontainer">

    <!--
    #################################
        - THEMEPUNCH BANNER -
    #################################
    -->
    <!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode -->

    <div class="tp-banner-container">
        <div class="tp-banner">
            <ul>    <!-- SLIDE  -->
                <li data-transition="fade" data-slotamount="1" data-masterspeed="400" data-delay="5000">
                    <!-- MAIN IMAGE -->
                    <img src="images/kenburns1.jpg" alt="kenburns1" data-bgposition="left bottom" data-kenburns="on"
                         data-duration="2000" data-ease="Power4.easeInOut" data-bgfit="200" data-bgfitend="100"
                         data-bgpositionend="center top">
                    <!-- LAYERS -->

                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption large_bg_black customin customout tp-resizeme"
                         data-x="center" data-hoffset="0"
                         data-y="bottom" data-voffset="-70"
                         data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-speed="500"
                         data-start="400"
                         data-easing="Power4.easeOut"
                         data-end="1500"
                         data-endspeed="500"
                         data-endeasing="Power4.easeIn"
                         style="z-index: 2">Hi Everyone
                    </div>

                    <!-- LAYER NR. 2 -->
                    <div class="tp-caption large_bg_black customin stl tp-resizeme"
                         data-x="center" data-hoffset="0"
                         data-y="bottom" data-voffset="-70"
                         data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-speed="300"
                         data-start="2000"
                         data-easing="Back.easeOut"
                         data-end="3000"
                         data-endspeed="500"
                         data-endeasing="Power4.easeIn"
                         style="z-index: 3">I'm Up Here
                    </div>

                    <!-- LAYER NR. 3 -->
                    <div class="tp-caption largepinkbg customin customout tp-resizeme"
                         data-x="center" data-hoffset="0"
                         data-y="bottom" data-voffset="-70"
                         data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-customout="x:0;y:180;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-speed="300"
                         data-start="3500"
                         data-easing="Back.easeOut"
                         data-endspeed="300"
                         data-endeasing="Back.easeIn"
                         style="z-index: 4"><strong>Revolution Slider</strong> Ken Burns Effect
                    </div>
                </li>
                <!-- SLIDE  -->
                <li data-transition="flyin" data-slotamount="1" data-masterspeed="1000">
                    <!-- MAIN IMAGE -->
                    <img src="images/kenburns2.jpg" alt="kenburns2" data-bgposition="left bottom" data-kenburns="on"
                         data-duration="10000" data-ease="Power0.easeIn" data-bgfit="120" data-bgfitend="100"
                         data-bgpositionend="right top">
                    <!-- LAYERS -->

                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption largeblackbg lfl customout tp-resizeme"
                         data-x="100"
                         data-y="bottom" data-voffset="-142"
                         data-customout="x:0;y:180;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-speed="1000"
                         data-start="2300"
                         data-easing="Power4.easeInOut"
                         data-endspeed="300"
                         style="z-index: 2">Ken Burns Transitions
                    </div>

                    <!-- LAYER NR. 2 -->
                    <div class="tp-caption modern_big_redbg lfl customout tp-resizeme"
                         data-x="100"
                         data-y="143"
                         data-customout="x:0;y:180;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-speed="1000"
                         data-start="2000"
                         data-easing="Power4.easeInOut"
                         data-endspeed="300"
                         style="z-index: 3">Customizable
                    </div>
                </li>
                <!-- SLIDE  -->
                <li data-transition="cube" data-slotamount="6" data-masterspeed="200" data-delay="7000">
                    <!-- MAIN IMAGE -->
                    <img src="images/kenburns3.jpg" alt="kenburns11" data-bgposition="left center" data-kenburns="on"
                         data-duration="10000" data-ease="Linear.easeNone" data-bgfit="115" data-bgfitend="115"
                         data-bgpositionend="right bottom">
                    <!-- LAYERS -->

                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption large_bg_black customin stt tp-resizeme"
                         data-x="center" data-hoffset="0"
                         data-y="180"
                         data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-speed="600"
                         data-start="500"
                         data-easing="Back.easeOut"
                         data-end="3000"
                         data-endspeed="300"
                         style="z-index: 2">Premium Features
                    </div>

                    <!-- LAYER NR. 2 -->
                    <div class="tp-caption large_bg_black sfb stt tp-resizeme"
                         data-x="center" data-hoffset="0"
                         data-y="180"
                         data-speed="600"
                         data-start="3300"
                         data-easing="Back.easeOut"
                         data-endspeed="300"
                         style="z-index: 3">Added Frequently
                    </div>

                    <!-- LAYER NR. 3 -->
                    <div class="tp-caption medium_bg_red customin customout tp-resizeme"
                         data-x="center" data-hoffset="0"
                         data-y="bottom" data-voffset="-100"
                         data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-speed="1000"
                         data-start="4000"
                         data-easing="Back.easeOut"
                         data-endspeed="300"
                         style="z-index: 4"><a
                            href="http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380?ref=themepunch"
                            target="_blank">Get Revolution Slider</a>
                    </div>
                </li>
                <!-- SLIDE  -->
                <li data-transition="parallaxtoright" data-slotamount="7" data-masterspeed="600">
                    <!-- MAIN IMAGE -->
                    <img src="images/kenburns4.jpg" alt="kenburns5" data-bgposition="right bottom" data-kenburns="on"
                         data-duration="11000" data-ease="Linear.easeNone" data-bgfit="100" data-bgfitend="130"
                         data-bgpositionend="left top">
                    <!-- LAYERS -->

                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption largeblackbg customin customout tp-resizeme"
                         data-x="right" data-hoffset="-60"
                         data-y="center" data-voffset="0"
                         data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-speed="600"
                         data-start="500"
                         data-easing="Power3.easeInOut"
                         data-endspeed="300"
                         style="z-index: 2">Create Amazing Sliders
                    </div>
                </li>
                <!-- SLIDE  -->
                <li data-transition="parallaxtotop" data-slotamount="7" data-masterspeed="600" data-delay="4500">
                    <!-- MAIN IMAGE -->
                    <img src="images/kenburns5.jpg" alt="kenburns9" data-bgposition="center center" data-kenburns="on"
                         data-duration="1500" data-ease="Power4.easeInOut" data-bgfit="200" data-bgfitend="100"
                         data-bgpositionend="center center">
                    <!-- LAYERS -->

                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption smoothcircle customin customout tp-resizeme"
                         data-x="center" data-hoffset="0"
                         data-y="center" data-voffset="0"
                         data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-speed="1000"
                         data-start="0"
                         data-easing="Power4.easeInOut"
                         data-end="1000"
                         data-endspeed="300"
                         style="z-index: 2">Spot On!
                    </div>

                    <!-- LAYER NR. 2 -->
                    <div class="tp-caption large_bg_black customin customout tp-resizeme"
                         data-x="center" data-hoffset="0"
                         data-y="bottom" data-voffset="-70"
                         data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-speed="600"
                         data-start="1500"
                         data-easing="Power4.easeInOut"
                         data-endspeed="300"
                         style="z-index: 3">Products By ThemePunch
                    </div>
                </li>
            </ul>
            <div class="tp-bannertimer"></div>
        </div>
    </div>

    <!-- THE SCRIPT INITIALISATION -->
    <!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
    <script type="text/javascript">

        var revapi;

        jQuery(document).ready(function () {

            revapi = jQuery('.tp-banner').revolution(
                {

                    delay: 9000,
                    startwidth: 1170,
                    startheight: 400,
                    hideThumbs: 200,
                    shadow: 2,
                    fullWidth: "on"
                });

        });	//ready

    </script>

    <!-- END REVOLUTION SLIDER -->


</article><!-- Content End -->


<div style="width:100%;height:40px"></div>


<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->

<section class="container">
    <h2>The Ken Burns Effect?</h2>
    <p>If you use the settings Background Fit, Background Fit End, Background Align and Background Align End, you can
        create great Background Zoom Effects </p>
    <div style="width:100%;height:20px"></div>
    <h3>How does a Slide Markup Looks like then ?</h3>
    <pre>
		&lt;li data-transition="fade" data-slotamount="1" data-masterspeed="400" data-delay="5000" &gt;
			&lt;!-- MAIN IMAGE --&gt;
			&lt;img src="images/kenburns1.jpg"
				 alt="kenburns1"
				 <strong>data-kenburns="on"
				 data-bgposition="left bottom"
				 data-bgpositionend="center top"
				 data-bgfit="200"
				 data-bgfitend="100"
				 data-duration="2000"
				 data-ease="Power4.easeInOut"</strong>
				 &gt;
		&lt;/li&gt;
		</pre>
</section>

</body>